<template>
    <div>
        <div class="top-bar">
            <div class="top-bar-box banner-box">
                <a href="#jieshao">公司介绍</a>
                <span></span>
                <a href="#kehu">客户案例</a>
                <span></span>
                <a href="#changrong">厂容厂貌</a>
                <span></span>
                <div class="a" @click="gotoTelme()">联系我们</div>
                <span></span>
            </div>
        </div>


        <!-- about -->
        <div class="about-box banner-box" id="jieshao">
            <div class="left-box">
                <div class="title">
                    ABOUT US
                </div>
                <div class="title2">
                    山东四度制冷科技有限公司
                </div>
                <div class="message">
                    山东四度制冷科技有限公司是一家有着十多年制冷设备制造经验的科技公司，专业提供实验室用低温操作台（工作台）、血液低温操作台（工作台）、医用洁净工作台、低温洁净工作台、低温配血台、血液配血台、等设备的研发生产，是一家具有雄厚研发生产能力及规模、高性价比的价格、完善售后服务的专业医疗制冷设备生产厂家。
                    公司有数名制冷研发工程师，一直致力于实验室、生物公司、医疗机构、制药厂、食品加工等有温度需求控制和空气净化的场所用设备的研发和生产。<br>
                    经过多年的实践生产经验，质量过硬，深得用户好评。并且我们可以根据用户的具体需求，特别定制各种规格的设备。公司始终以“满足客户需求”为己任，以“质量就是生命”为核心，打造让客户满意的产品。
                </div>
            </div>
            <div class="img-box">
                <img src="../assets/about/changrong.jpg" alt="">
            </div>
        </div>
        <!-- 客户 -->
        <div class="kehu-box " id="kehu">
            <div class="box banner-box">
                <div class="title">客户案例</div>
                <div class="item-box">
                    <!-- 1 -->
                    <div class="item">
                        <img src="../assets/about/kehu/1.jpg" alt="">
                        <p>南昌大学附属第二医院</p>
                    </div>
                    <!-- 2 -->

                    <div class="item">
                        <img src="../assets/about/kehu/2.jpg" alt="">
                        <p>台州市中心血站</p>
                    </div>
                    <!-- 3 -->

                    <div class="item">
                        <img src="../assets/about/kehu/3.jpg" alt="">
                        <p>厦门大学附属第一医院</p>
                    </div>
                    <!-- 4 -->

                    <div class="item">
                        <img src="../assets/about/kehu/4.jpg" alt="">
                        <p>哈尔滨市红十字中心医院</p>
                    </div>
                    <!-- 4 -->

                    <div class="item">
                        <img src="../assets/about/kehu/5.jpg" alt="">
                        <p>哈尔滨第一人民医院</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- changrong -->
        <div class="changrong-box" id="changrong">
            <div class="box banner-box">
                <div class="title">厂容厂貌</div>
                <div class="item-box">
                    <!-- 1 -->
                    <div class="item">
                        <img src="../assets/about/changrong/1.jpg" alt="">
                        <p>组装车间</p>
                    </div>
                    <!-- 2 -->

                    <div class="item">
                        <img src="../assets/about/changrong/2.jpg" alt="">
                        <p>组装车间</p>
                    </div>
                    <!-- 3 -->

                    <div class="item">
                        <img src="../assets/about/changrong/3.jpg" alt="">
                        <p>生产车间</p>
                    </div>
                    <!-- 4 -->

                    <div class="item">
                        <img src="../assets/about/changrong/4.jpg" alt="">
                        <p>生产车间</p>
                    </div>
                    <!-- 4 -->

                    <div class="item">
                        <img src="../assets/about/changrong/5.jpg" alt="">
                        <p>包装车间</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router/index.js'

const gotoTelme = () => {
    router.push('/telme')
}

</script>

<style lang="scss" scoped>
/* pc */
@media (min-width: 800px) {
    .top-bar {
        background-color: rgb(244, 245, 249);

        .top-bar-box {
            padding: 20px 0;
            display: flex;

            span {
                display: block;
                height: 60px;
                background-color: gainsboro;
                width: 1px;
                margin-left: 40px;
                margin-right: 40px;
            }

            a {
                line-height: 60px;
                cursor: pointer;
                transition: transform 0.3s ease;
                color: black;

            }

            a:hover {
                color: red;
            }

            .a {
                line-height: 60px;
                cursor: pointer;
                color: black;
                transition: transform 0.3s ease;
            }

            .a:hover {
                color: red;
            }
        }
    }


    .about-box {
        padding: 40px 0;
        display: flex;

        .left-box {
            .title {
                color: rgb(189, 152, 108);
                font-size: 18px;
            }

            .title2 {
                line-height: 48px;
                font-weight: 400;
                font-size: 35px;
            }

            .message {
                color: rgb(170, 170, 170);
                line-height: 32px;
            }
        }

        .img-box {
            margin-left: 40px;
        }
    }

    .kehu-box {
        background-color: rgb(235, 243, 247);

        .box {
            padding: 40px 0;

            .title {
                text-align: center;
                font-size: 42px;
            }


            .item-box {
                display: flex;
                justify-content: space-between;
                padding-top: 40px;

                .item {
                    width: 270px;

                    img {
                        width: 270px;
                    }

                    p {
                        text-align: center;
                    }
                }
            }
        }
    }

    .changrong-box {
        background-color: rgb(255, 255, 255);

        .box {
            padding: 40px 0;

            .title {
                text-align: center;
                font-size: 42px;
            }


            .item-box {
                display: flex;
                justify-content: space-between;
                padding-top: 40px;

                .item {
                    width: 270px;

                    img {
                        width: 270px;
                    }

                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}

/* phone */
@media screen and (max-width: 799px) {
    img {
        width: 100%;
    }

    .top-bar {
        display: none;
    }

    .about-box {
        .left-box {
            .title {
                display: none;
            }

            .title2 {
                display: none;
            }

            .message {
                line-height: 40px;
                font-size: 18px;
                padding: 10px;
            }
        }
    }

    .kehu-box {
        .box {
            .title {
                text-align: center;
                font-size: 20px;
                line-height: 40px;
            }

            .item-box {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 4px;
                text-align: center;
            }
        }

    }
    .changrong-box {
        margin: 10px 0;
        .box {
            .title {
                text-align: center;
                font-size: 20px;
                line-height: 40px;
            }
            .item-box {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 4px;
                .item {
                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
